<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<meta name="screen-orientation" content="portrait" />
		<meta name="x5-orientation" content="portrait" />
		<meta name="format-detection" content="telephone=no" />
		<meta name="msapplication-tap-highlight" content="no" />
		<link rel="stylesheet" href="../../js/plugins/element-ui/element-ui.css">
		<!--fontAwesome-->
		<link rel="stylesheet" href="../../css/front/font-awesome.min.css">
		<title>绿建社区首页</title>
		<style>
			body {
				margin: 0;
				padding: 0;
				font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
			}
			
			footer {
				color: #FFFFFF;
				height: 150px;
				line-height: 150px;
				text-align: center;
				background: #373D41;
				width: 100%;
			}
			ul{ margin:0;padding:0;}
			
			ul li {
				list-style: none;
			}
			
			.logo {
				width: 200px;
				height: 50px;
				float: left;
				margin-top: 13px;
			}
			
			.el-menu {
				padding: 0 10%;
			}
			
			.el-menu--horizontal .el-menu-item {
				float: right;
			}
			
			.sub-header {
				border-bottom: 1px solid #cecece;
				padding: 0 13%;
				height: 74px;
			}
			
			.sub-header ul {
				width: 100%;
			}
			
			.sub-header ul li {
				float: left;
				margin: 0 20px;
				font-size: 14px;
			}
			
			.community-title {
				font-size: 30px;
				font-weight: bold;
				color: #0082E6;
				text-align: center;
			}
			
			.community-sub-title {
				font-size: 14px;
				text-align: center;
				margin-top: 5px;
			}
			
			.sub-header-nav {
				margin-top: 30px;
			}
			
			.el-input__inner {
				min-width: 250px;
			}
			
			.demo-form-inline {
				margin-top: 23px;
			}
			/*.carousel{height: 500px;}
			.carousel img{height: 500px;width: 100px;}*/
			/*调试*/
			
			/*.el-row {
				height: 74px
			}
			
			.el-col {
				border: 1px solid #00625A;
			}
			
			.bg-purple {
				background: #d3dce6;
			}
			
			.grid-content {
				border-radius: 4px;
				min-height: 36px;
			}*/
			.content-blog ul{clear: both;}
			.userinfo {
				text-align: left;
				padding-right: 35px;
				float: left;
			}
			
			.userinfo-inner {
				cursor: pointer;
			}
			
			.userinfo-inner img {
				width: 30px;
				height: 30px;
				border-radius: 20px;
				float: left;
				margin-right: 10px;
			}
			.el-card__header {
				text-align: center;
				  padding: 10px 20px;
				background: #00A2CA;
				border: 1px solid #00A2CA;
				}
				.el-card__body {
					padding: 10px;
					height: 300px;
					}
				 .text {
    font-size: 14px;
  }

  .item {
    padding: 3px 10px;
  }

		</style>
	</head>

	<body>
		<div id="community-index">
			<!--header-->
			<header>
				<el-menu theme="dark" :default-active="0" class="el-menu-demo" mode="horizontal" @select="handleSelect">
					<div class="logo">
						<img src="../../img/header_logoaa.gif" width="100%" />
					</div>
					<div class="right">
						<el-menu-item index="1">登录</el-menu-item>
						<el-menu-item index="2">注册</el-menu-item>
					</div>
				</el-menu>
				<el-row :gutter="24" class="sub-header">
					<el-col :span="4">
						<div class="community-title">绿建社区</div>
						<div class="community-sub-title">绿色建筑人的园地</div>
					</el-col>
					<el-col :span="7">
						<div class="sub-header-nav">
							<ul>
								<li v-for="head in heads">
									<a :href="head.clik">{{head.name}}</a>
								</li>
							</ul>
						</div>
					</el-col>
					<el-col :span="8">
						<div class="grid-content bg-purple">
							<el-form :inline="true" :model="formSearch" class="demo-form-inline">
								<el-form-item label="">
									<el-input v-model="formSearch.ques" placeholder="找文章、答案、专家"></el-input>
								</el-form-item>
								<el-form-item>
									<el-button type="primary"  icon="search" @click="onSubmit">搜索</el-button>
								</el-form-item>
							</el-form>
						</div>
					</el-col>
					<el-col :span="5">
						<div class="sub-header-nav">
							<ul>
								<li v-for="head in rightHeads">
									<a :href="head.clik">{{head.name}}</a>
								</li>
							</ul>
						</div>
					</el-col>
				</el-row>
			</header>
			<main>
				<div class="content" style="margin-top: 30px;margin-left:20%;">
					<div class="content-left" style="position: relative;float:left;width:70%;margin-right: 2%;">
						<div class="" style="float: left;width:60%;margin-right:2%;border: 1px solid #000000;">
							<!--<img src="../../img/slide/cover_1.jpg" height="300" width="625" />-->
							 <el-carousel trigger="click" height="300px">
						      <el-carousel-item v-for="item in slideList" :key="item">
						        <img :src="item.image" :alt="item.desc" height="300">
						      </el-carousel-item>
						    </el-carousel>
						</div>
						<div class="" style="position: relative;float: left;width: 36%;height: 300px;top:0px;left:0px;border: 1px solid #CECECE;">
							<!--<el-card class="box-card" style="height: 300px;">
							  <div slot="header" class="clearfix">
							    <span style="line-height: 20px;">专题</span>
							  </div>
							  <div v-for="o in 4" :key="o" class="text item">
							    {{'列表内容 ' + o }}
							  </div>
							  <div class="bottom clearfix">
						          <el-button type="text" class="button">更多专题>></el-button>
						        </div>
							</el-card>-->
							<div class="ljy-box-card">
								<div class="card-top" style="background: #00A2CA;height: 45px;text-align: center;">
							   		 <span style="line-height: 45px;">专题</span>
							  	</div>
							  	<div v-for="o in 5" :key="o" class="text item">
							    	{{'列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容列表内容 ' + o }}
							  	</div>
							  	<div class="card-top" style="position:absolute;bottom:0px;right:0px; padding: 10px;">
						          <el-button type="text" class="button">更多专题>></el-button>
						        </div>
							</div>
						</div>
						<div class="" style="clear: both;"></div>
						<div class="" style="border: 1px solid #000000;width:98%;height: 90px;margin-top: 15px">
							barner
						</div>
						<div class="" style="width:98%;background: #E2ECF6;min-height: 170px;margin-top: 30px;">
							<div class="" style="float: left;width: 3%;border-right:1px solid #FFFFFF; text-align: center;min-height: 170px;position:relative;top: 20%;">
								推荐话题
							</div>
							<div class="" style="float: left;width: 96%;">
								话题内容
							</div>
						</div>
						<div class="" style="clear: both;"></div>
						<div class="content-blog" style="width:98%;margin-top: 70px;min-height: 210px;">
							<ul>
								<li v-for="blog in blogList" style="margin-bottom: 10px;">
									<el-card class="box-card" style="width:100%;">
										<ul>
											<li>
												<div class="" style="float: left;line-height: 30px;margin-right:10px;">
													<el-tag type="success">{{blog.typeName}}</el-tag>
												</div>
												<div class="" style="float: left;line-height: 35px;font-weight:bold;">
													{{blog.title}}
												</div>
												<div style="clear: both;"></div>
												<div class="" style="vertical-align:middle;height: 30px;line-height: 30px;color: #5E7382;margin-top: 10px;">
													<span class="userinfo-inner"><img :src="blog.authorAvatar"/></span>
													<span>作者：{{blog.author}}</span>
													<span><i class="fa fa-eye"></i>&nbsp;{{blog.visitors}}人浏览</span>
													<span>&nbsp;来自于：<font color="#0082E6">{{blog.source}}</font></span>
												</div>
												<div style="clear: both;"></div>
												<div class="">
													<p>&emsp;{{blog.content}}</p>
												</div>
												<div class="" >
													<ul>
														<li v-for="tag in blog.tags" style="float: left;margin-bottom: 10px;">
														    &nbsp;<el-button type="" >{{tag.name}}</el-button>
														</li>
													</ul>	
												</div>
												
											</li>
										</ul>
									</el-card>
								</li>
							</ul>
						</div>
					</div>
					<div class="content-right" style="float:left;width:18%;">
						<div class="grid-content bg-purple" style="background: #EFF1F4;height: 350px;padding: 5px;">
							<template>
								<el-tabs v-model="activeName" @tab-click="handleClick">
									<el-tab-pane label="绿建专家" name="first">绿建专家</el-tab-pane>
								</el-tabs>
							</template>
						</div>
						<div class="" style="margin: 10px 0 30px 0;border: 1px solid #000000;">
							<el-button type="primary">注册会员送礼包</el-button>
						</div>
						<div style="background: #F9F9F9;height: 350px;margin-bottom: 10px;padding: 5px;">
							<template>
								<el-tabs v-model="activeName" @tab-click="handleClick">
									<el-tab-pane label="公告" name="first">公告</el-tab-pane>
									<el-tab-pane label="规则" name="first">规则</el-tab-pane>
								</el-tabs>
							</template>
						</div>
						<div style="background: #F9F9F9;height: 350px;margin-bottom: 10px;padding: 5px;">
							<template>
								<el-tabs v-model="activeName" @tab-click="handleClick">
									<el-tab-pane label="每月达人推荐" name="first">每月达人推荐</el-tab-pane>
								</el-tabs>
							</template>
						</div>
						<div style="background: #EFF1F4;height: 350px;margin-bottom: 10px;padding: 5px;">
							<template>
								<el-tabs v-model="activeName" @tab-click="handleClick">
									<el-tab-pane label="最近回复" name="first">最近回复</el-tab-pane>
									<el-tab-pane label="最新帖子" name="first">最新帖子</el-tab-pane>
								</el-tabs>
							</template>
						</div>
						<div style="background: #FFFFFF;height: 350px;border: 1px solid #CECECE;padding: 5px;">
							会员产品广告图片
						</div>
					</div>
				</div>
			</main>
			<div class="" style="clear: both;"></div>
			<footer>
				<p>版权所有：贵州绿建云&nbsp;&nbsp;&nbsp;&nbsp;Copyright©2017 All rights reserved</p>
			</footer>
		</div>

		<script type="text/javascript" src="../../js/plugins/vue/vue.min.js"></script>
		<script type="text/javascript" src="../../js/plugins/element-ui/element-ui.js"></script>
		<script type="text/javascript" src="../../js/plugins/jQuery/jquery-3.1.1.min.js"></script>
	</body>
	<script>
		var Main = new Vue({
			el: '#community-index',
			data: {
					activeIndex: '1',
					//导航1
					heads: [{
							name: '博客'
						},
						{
							name: '论坛'
						},
						{
							name: '问答'
						},
						{
							name: '活动'
						}
					],
					//导航2
					rightHeads: [{
							name: '写博客'
						},
						{
							name: '提问题'
						},
						{
							name: '登录社区'
						}
					],
					formSearch: {
						ques: ''
					},
					currentIndex: 0,
					//轮播图图片路径
					slideList: [{
							"clickUrl": "#",
							"desc": "nhwc",
							"image": "../../img/slide/cover_0.jpg"
						},
						{
							"clickUrl": "#",
							"desc": "hxrj",
							"image": "../../img/slide/cover_1.jpg"
						},
						{
							"clickUrl": "#",
							"desc": "rsdh",
							"image": "../../img/slide/cover_2.jpg"
						},
						{
							"clickUrl": "#",
							"desc": "rsdh1",
							"image": "../../img/slide/cover_3.jpg"
						}
					],
					//博客内容
					blogList: [{
							typeName : '博客',
							title: '人工智能在细分及新型领域的应用',
							author:'【方向】',
							authorAvatar:'../../img/slide/cover_3.jpg',
							visitors:'669',
							source:'翻译小组',
							content: '深度学习算法在学习和预测方面的能力实现人工智能应用打开了大门。如今，AI也在其他领域产生了深远的影响。在这篇文章中，我们将讨论AI在一些细分领域方面的应用。',
							tags:[{name:'算法'},{name:'HTTPS'},{name:'HTTP'},{name:'人工智能'},{name:'机器人'}]
						},
						{
							typeName : '博客',
							title: '人工智能在细分及新型领域的应用',
							author:'【方向】',
							authorAvatar:'../../img/slide/cover_3.jpg',
							visitors:'669',
							source:'翻译小组',
							content: '深度学习算法在学习和预测方面的能力实现人工智能应用打开了大门。如今，AI也在其他领域产生了深远的影响。在这篇文章中，我们将讨论AI在一些细分领域方面的应用。',
							tags:[{name:'算法'},{name:'HTTPS'},{name:'HTTP'},{name:'人工智能'},{name:'机器人'}]
						},
						
						{
							typeName : '博客',
							title: '人工智能在细分及新型领域的应用',
							author:'【方向】',
							authorAvatar:'../../img/slide/cover_3.jpg',
							visitors:'669',
							source:'翻译小组',
							content: '深度学习算法在学习和预测方面的能力实现人工智能应用打开了大门。如今，AI也在其他领域产生了深远的影响。在这篇文章中，我们将讨论AI在一些细分领域方面的应用。',
							tags:[{name:'算法'},{name:'HTTPS'},{name:'HTTP'},{name:'人工智能'},{name:'机器人'}]
						}
					],
					activeName: 'first',
			},
			methods: {
				handleSelect:function (key, keyPath) {
					console.log(key, keyPath);
				},
				onSubmit:function() {
					console.log('submit!');
				},
				handleClick:function (tab, event) {
					console.log(tab, event);
				}

			},
		})
	</script>

</html>